<template>
	<view class="container">
		<view class="spacer" style="height: 5rpx;"></view>
		<view>
			<u-search :placeholder="currentText" borderColor="#c3c3c3" bgColor="#ffffff" @focus="handleFocus"
				:disabled="true" :clearabled="true" @blur="handleBlur" @click="toSearch" right-icon="search"
				:showAction="false"></u-search>
		</view>
		<view class="spacer" style="height: 15rpx;"></view>
		<view class="u-block">
			<up-swiper indicatorMode="dot" radius="15" autoplay="ture" indicatorActiveColor="#000000"
				indicatorInactiveColor="rgba(255, 255, 255, 0.35)" :indicator="indicatorValue" :list="carouselList"
				keyName="url" :autoplay="false" height="135"></up-swiper>
		</view>
		<view class="ranking-list">
			<view class="ranking" v-for="(item, index) in head" :key="index">
				<up-icon :name="item.src" labelPos=bottom top=10 color="#ff0000" size="35"></up-icon>
				<view class="spacer" style="height: 50rpx;"></view>
				<up-text :text="item.name" size=23rpx align=center :bold="true"></up-text>
			</view>
		</view>
		<view class="spacer" style="height: 30rpx;"></view>
		<view>
			<up-notice-bar bgColor="#ff0000" color="#ffffff" :text="text1"></up-notice-bar>
		</view>
		<view class="spacer" style="height: 30rpx;"></view>
		<!-- 猜你喜欢 -->
		<view>
			<view class="text_container">
				<up-text class="left-text" size=18 :bold="true" text="猜你喜欢"></up-text>
				<up-text class="right-text" align="right" suffixIcon="arrow-right" iconStyle="10rpx"
					text="查看更多"></up-text>
			</view>
			<view class="book-list">
				<view @click="toBookDetails(item.id)" class="book" v-for="(item, index) in likeBookList" :key="index">
					<up-image width="220rpx" height="300rpx" radius="20rpx" :show-loading="true"
						:src="item.url"></up-image>
					<view class="spacer" style="height: 15rpx;"></view>
					<up-text :text="item.name" size="30rpx" align=center :bold="true"></up-text>
				</view>
			</view>
		</view>
		<view class="spacer" style="height: 70rpx;"></view>
		<!-- 热门图书 -->
		<view>
			<view class="text_container">
				<up-text class="left-text" size=18 :bold="true" text="热门图书"></up-text>
				<up-text class="right-text" align="right" suffixIcon="arrow-right" iconStyle="10rpx"
					text="查看更多"></up-text>
			</view>
			<view class="book-list">
				<view class="book" v-for="(item, index) in hotBookList" :key="index">
					<up-image width="220rpx" height="300rpx" radius="20rpx" :show-loading="true"
						:src="item.url"></up-image>
					<view class="spacer" style="height: 15rpx;"></view>
					<up-text :text="item.name" size="30rpx" align=center :bold="true"></up-text>
				</view>
			</view>
		</view>
		<!-- 读书感悟 -->
		<view class="spacer" style="height: 70rpx;"></view>
		<view>
			<view class="text_container">
				<up-text class="left-text" size=18 :bold="true" text="读书感悟"></up-text>
				<up-text class="right-text" align="right" suffixIcon="arrow-right" iconStyle="10rpx"
					text="查看更多"></up-text>
			</view>
			<view class="spacer" style="height: 30rpx;"></view>
			<view class="enlightenment-list">
				<view class="enlightenment" v-for="(item, index) in readFeelList" :key="index">
					<view style="margin-right: 20rpx;width: 30%;">
						<up-image width="220rpx" height="300rpx" radius="20rpx" :show-loading="true"
							:src="item.url"></up-image>
					</view>
					<view style="margin-right: 20rpx;width: 100%;">
						<view class="spacer" style="height: 20rpx;"></view>
						<up-text :bold="true" size=18 :text="item.name"></up-text>
						<view class="spacer" style="height: 15rpx;"></view>
						<view style="display: flex; justify-content: space-between; width: 250rpx; /* 或者您想要的其他值 */">
							<up-text size="10" :text="`访问量:${item.visit}`"></up-text>
							<up-text size="10" :text="`访问量:${item.thumbs}`"></up-text>
						</view>
						<view class="spacer" style="height: 30rpx;"></view>
						<up-text :text="item.enlightenment"></up-text>
					</view>
				</view>
			</view>
		</view>
		<!-- 最新活动 -->
		<view class="spacer" style="height: 70rpx;"></view>
		<view>
			<view class="text_container">
				<up-text class="left-text" size=18 :bold="true" text="最新活动"></up-text>
				<up-text class="right-text" align="right" suffixIcon="arrow-right" iconStyle="10rpx"
					text="查看更多"></up-text>
			</view>
			<view class="spacer" style="height: 30rpx;"></view>
			<view class="enlightenment-list">
				<view class="enlightenment" v-for="(item, index) in activityList" :key="index">
					<view style="margin-right: 20rpx;width: 30%;">
						<up-image width="220rpx" height="300rpx" radius="20rpx" :show-loading="true"
							:src="item.url"></up-image>
					</view>
					<view style="margin-right: 20rpx;width: 100%;">
						<view class="spacer" style="height: 20rpx;"></view>
						<up-text :bold="true" size=18 :text="item.name"></up-text>
						<view class="spacer" style="height: 15rpx;"></view>
						<up-text size=10 :text="`活动时间:${item.time}`"></up-text>
						<view class="spacer" style="height: 30rpx;"></view>
						<up-text :text="item.introduction"></up-text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				SearchKeywordList: [],
				currentTextIndex: 0,
				defaultText: '请输入书名/作者/ISBN/活动名称',
				indicatorValue: true,
				currentText: '',
				text1: 'uview-plus UI众多组件覆盖开发过程的各个需求，组件功能丰富，多端兼容。让您快速集成，开箱即用',
				timer: null,
				// 轮播图
				carouselList: [{
					url: 'https://cdn.uviewui.com/uview/resources/video.mp4',
					title: '昨夜星辰昨夜风，画楼西畔桂堂东',
					poster: 'https://cdn.uviewui.com/uview/swiper/swiper1.png'
				}, {
					url: 'https://cdn.uviewui.com/uview/swiper/swiper2.png',
					title: '身无彩凤双飞翼，心有灵犀一点通'
				}, {
					url: 'https://cdn.uviewui.com/uview/swiper/swiper3.png',
					title: '谁念西风独自凉，萧萧黄叶闭疏窗，沉思往事立残阳'
				}],
				// 标签
				head: [{
					src: "calendar",
					name: "个人书房",
				}, {
					src: "bookmark",
					name: "个人报告",
				}, {
					src: "file-text",
					name: "图书馆年报",
				}, {
					src: "bag",
					name: "校园爱读",
				}, {
					src: "map",
					name: "附近图书馆",
				}],
				// 猜你喜欢
				likeBookList: [{
					id: 1,
					url: "https://cdn.uviewui.com/uview/album/1.jpg",
					name: "风花雪月"
				}, {
					id: 2,
					url: "https://cdn.uviewui.com/uview/album/1.jpg",
					name: "26岁女房客"
				}, {
					id: 3,
					url: "https://cdn.uviewui.com/uview/album/1.jpg",
					name: "哈康了了"
				}],
				// 热门图书
				hotBookList: [{
					id: 1,
					url: "https://cdn.uviewui.com/uview/album/1.jpg",
					name: "风花雪月"
				}, {
					id: 2,
					url: "https://cdn.uviewui.com/uview/album/1.jpg",
					name: "26岁女房客"
				}, {
					id: 3,
					url: "https://cdn.uviewui.com/uview/album/1.jpg",
					name: "哈康了了"
				}],
				// 读书感悟
				readFeelList: [{
					id: 1,
					url: "https://img.zcool.cn/community/01d418583fe5bda8012060c826f26e.jpg@1280w_1l_2o_100sh.jpg",
					name: "我的26岁女房客",
					visit: "288",
					thumbs: "147",
					enlightenment: "人生就像电影，怎样过都是自己在导演。人生随时可以复盘，关键看你如何以自已。"
				}, {
					id: 1,
					url: "https://img.zcool.cn/community/01d418583fe5bda8012060c826f26e.jpg@1280w_1l_2o_100sh.jpg",
					name: "我的26岁女房客",
					visit: "288",
					thumbs: "147",
					enlightenment: "人生就像电影，怎样过都是自己在导演。人生随时可以复盘，关键看你如何以自已。"
				}, {
					id: 1,
					url: "https://img.zcool.cn/community/01d418583fe5bda8012060c826f26e.jpg@1280w_1l_2o_100sh.jpg",
					name: "我的26岁女房客",
					visit: "288",
					thumbs: "147",
					enlightenment: "人生就像电影，怎样过都是自己在导演。人生随时可以复盘，关键看你如何以自已。"
				}],
				// 活动列表
				activityList: [{
					id: 1,
					url: "https://img.zcool.cn/community/011f075ebd771aa801214814eab377.jpg@1280w_1l_2o_100sh.jpg",
					name: "全民读好书",
					status: 0,
					time: "2024年6月21日",
					introduction: "11位主持人和特邀连线嘉宾一起直播读书带货，给有需要的孩子捐赠书本。"
				}, {
					id: 2,
					url: "https://img.zcool.cn/community/01d8965c739ea7a801213f26d3604d.png@1280w_1l_2o_100sh.png",
					name: "荆棘鸟书会",
					status: 2,
					time: "2024年6月21日",
					introduction: "一个人在美丽纷繁的野外行走，因为自我中心的限制，无法看到周身瑰丽景色。"
				}, {
					id: 3,
					url: "https://ts1.cn.mm.bing.net/th/id/R-C.d65fc2bdb85e811df3b7d55de9949bb8?rik=rzgNwpd3cIQTzQ&riu=http%3a%2f%2fimg95.699pic.com%2fdesgin_photo%2f40100%2f2620_detail.jpg!detail860%2ffw%2f820%2fcrop%2f0x1309a0a0%2fquality%2f90&ehk=wWophK2LKW%2blLqktL9WRIOmAmSy3yqVybPM16lSax48%3d&risl=&pid=ImgRaw&r=0",
					name: "创意世界读书日",
					status: 1,
					time: "2024年6月21日",
					introduction: "读一本好书",
				}],
			};
		},
		onLoad() {
			uni.request({
				url: 'http://localhost:8080/app/api/v1/index/searchKey',
				success: (res) => {
					this.SearchKeywordList = res.data.data
				}
			});

		},
		mounted() {
			this.startTextChange();
		},
		methods: {
			toBookDetails(id) {
				uni.navigateTo({
					url: `/pages/bookdetails/bookdetails?id=${id}`
				});
			},
			toSearch() {
				uni.navigateTo({
					url: '/pages/search/search'
				});
			},
			startTextChange() {
				if (this.SearchKeywordList.length === 0) {
					this.currentText = this.defaultText;
					return;
				}
				this.timer = setInterval(() => {
					this.currentTextIndex = (this.currentTextIndex + 1) % this.SearchKeywordList.length;
					this.currentText = this.SearchKeywordList[this.currentTextIndex];
				}, 3000);
			},
			handleFocus() {
				clearInterval(this.timer);
				this.currentText = '';
			},
			handleBlur() {
				this.startTextChange();
			},
		},
		beforeDestroy() {
			clearInterval(this.timer);
		}
	};
</script>

<style lang="scss">
	.container {
		padding: 10rpx;
		margin: 10rpx;
	}

	.u-block {
		top: 52rpx;
	}

	.spacer {
		background-color: transparent;
	}

	.ranking-list {
		height: 170rpx;
		opacity: 1;
		border-radius: 17rpx;
		// background: #000000;
		display: flex;
		align-items: center;
	}

	.ranking {
		background-color: #ececec;
		width: 150rpx;
		height: 105rpx;
		border-radius: 20rpx;
		margin: 10rpx;
	}

	.text_container {
		display: flex;
		justify-content: space-between;
		align-items: left;
	}

	.left-text,
	.right-text {
		margin: 0 15rpx;
	}

	.book-list {
		height: 340rpx;
		opacity: 1;
		border-radius: 17rpx;
		// background: #000000;
		display: flex;
		align-items: center;
	}

	.book {
		width: 275rpx;
		height: 300rpx;
		background: #ececec;
		margin: 0 10rpx;
		border-radius: 20rpx;
	}

	.enlightenment-list {
		width: 100%;
		height: 1024rpx;
	}

	.enlightenment {
		width: 100%;
		height: 340rpx;
		display: flex;
	}
</style>